<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>蒋琼浩</title>
  </head>
  <body>
    <script src="js/echarts.min.js"></script>
    <script src="js/zhejiang.js"></script>
    <div id="main" style="width: 600px; height: 400px"></div>
    <script type="text/javascript">
      var myChart = echarts.init(document.getElementById("main"));
      var option = {
        visualMap: {
          left: "center",
          bottom: "bottom",
          min: 0,
          max: 10,
          orient: "horizontal",
          inRange: {
            color: ["red", "yellow"],
          },
        },
        yAxis: [
          {
            type: "category",
            data: ["x", "y", "z", "w"],
          },
        ],
        xAxis: [
          {
            type: "category",
            data: ["1a", "3a", "5a"],
          },
        ],
        series: [
          {
            type: "heatmap",
            data: [
              [0, 0, 10],
              [0, 1, 9],
              [2, 3, 1],
              [0, 2, 3],
              [1, 0, 7],
              [1, 1, 8],
              [2, 2, 4],
            ],
          },
        ],
        label: {
          show: true,
        },
      };
      myChart.setOption(option);
    </script>
  </body>
</html>
